<template>
  <div style="height:1000px">
    <el-card shadow="hover" class="box-card" style="height: 1000px;">
      <h1 >{{ Title }}</h1>
      <p>
        发布人：{{ Author }}<br>
        发布日期：{{ getFormatTime(Ntime) }}<br>
      </p>
      <div style="width:1200px;margin-left: 60px;margin-top: 20px;text-align: left" v-html="formattedContent"></div>
    </el-card>
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      noticeID: '',
      Title: '软件工程学院关于2022-2023学年优良学风班初审拟推荐结果的公示',
      Author: '周玉婷',
      Ntime: '2024-01-15',
      Content: '各位本科生：根据《中山大学优良学风班奖励办法》（中大学生〔2020〕20号） 《党委学生工作部关于开展优良学风班评选工作的通知》（学生〔2023〕527 号） 《软件工程学院优良学风班评选细则》等文件要求，学院组织开展2022-2023学年优良学风班评选工作。一、评选对象2022 - 2023学年在校的本科学生班集体。二、总体要求深入贯彻落实习近平新时代中国特色社会主义思想，坚持和加强党的全面领导，落实立德树人根本任务，坚持以学生成长为中心，着力培养学生的学习力、思想力、行动力，以培养德智体美劳全面发展的社会主义建设者和接班人为标准，为进一步切实推进我校学风校风建设，以培育优良学风校风为导向，评选优良学风班。',
      // FileUrl: 'https://sse.sysu.edu.cn/article/676',
      // FileName: '软件工程学院优良学风班评选细则.docx'
    };
  },
  methods: {
    getFormatTime(time) {
      let date = new Date(time); 
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, '0'); 
      let day = date.getDate().toString().padStart(2, '0');
      let hours = date.getHours().toString().padStart(2, '0');
      let minutes = date.getMinutes().toString().padStart(2, '0');
      let seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    fetchNotice() {
      const formData =new FormData();
      formData.append('noticeID',this.noticeID);
      axios.post('/notice', formData)
        .then(response => {
          const notice = response.data.data.notice;
          this.Title = notice.Title;
          this.Author = notice.Author;
          this.Ntime = notice.Ntime;
          this.Content = notice.Content;
          // this.FileUrl = notice.FileUrl;
          // this.FileName = notice.FileName;
        })
        .catch(error => {
          console.log(error);
        });
    },
    
  },
  computed: {
    formattedContent() {
        return this.Content.replace(/\n/g, '<br>');
      }
    },
  created() {
    const Notice = JSON.parse(sessionStorage.getItem('noticeID'));
    if (Notice) {
      this.noticeID = Notice.notice;
    }
    this.fetchNotice();
  }
};
</script>

<style>
.box-card{
  background-color: rgba(255,255,255,0.6);
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
p {
  font-size: 14px;
  color: #666;
}
div {
  font-size: 16px;
  line-height: 1.5;
}
.file-download {
  margin-top: 20px;
}
.file-download a {
  color: #1a73e8;
  text-decoration: none;
  font-size: 16px;
}
</style>
